<template>
    <div>
        <a-modal
            title="调整审评项目"
            v-model="visible"
            @ok="visible = false"
            @cancel="visible = false"
            :footer="null"
            :width="800"
            :dialogStyle="{top:'40px'}"
            :forceRender="true"
            class="inspectionItems-db-modal"
        >
            <span class="inspectionItems-situation-tips">（所有编辑提示：编辑完成，鼠标移开输入框以后系统会自动保存）</span>
            <!-- <div style="height: 410px;overflow: hidden;"> -->
                <div class="process-handling-card" >
                    <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange">
                        <a-tab-pane key="审评情况描述" tab="审评情况描述"></a-tab-pane>
                        <a-tab-pane key="审评项目" tab="审评项目"></a-tab-pane>
                    </a-tabs>
                </div>
                <div class="inspectionItems-content-tabs">
                    <div v-if="activeKey == '审评情况描述'">
                        <div class="item-box-v" >
                            <span class="text-v">审评情况描述标题：</span>
                            <a-input style="flex: 1;" placeholder="请输入审评情况描述标题" v-model:value="formState.fmsmbbt" @blur="zjqkmsBlur('fmsmbbt',formState.fmsmbbt)" />
                        </div>
                        <commpKindeditor
                            :id="fileTemplateIncreaseKindeditorId" 
                            :key="fileTemplateIncreaseKindeditorKey"
                            :height="windowInnerHeight - 305+'px'" 
                            width="100%" 
                            :content.sync="formState.fmsmbnr"
                            :afterChange="()=>{}"
                            @afterBlur="$event=>{zjqkmsBlur('fmsmbnr',formState.fmsmbnr)}"
                            :loadStyleMode="false"
                        ></commpKindeditor>
                    </div>
                    <div v-if="activeKey == '审评项目'">
                        <div class="item-box-v">
                            <span class="text-v" >审评项目标题：</span>
                            <a-input style="flex: 1;" placeholder="请输入审评项目标题" @blur="zjqkmsBlur('fjcxmbt',formState.fjcxmbt)" v-model:value="formState.fjcxmbt"/>
                        </div>
                        <commpVxeTable
                            :key="tableKey"
                            :isCanWrap="true"
                            :config="dataTableConfig"
                            :columns="columnsVxe"
                            :formItem="formItem"
                            :conditionBtnRow="true"
                            :tablePadding="'0'"
                            :assembleWidth="740"
                            :arrangeSearchNum="2"
                            ref="acceptanceRegistrationRef"
                        >
                            <template v-slot:externalOperations="{data}"  >
                                <vxe-form-item>
                                    <template>
                                        <a-button class="blue-btn" type="primary" @click="addition()" icon="plus">新增</a-button>
                                    </template>
                                </vxe-form-item>
                            </template>
                            <template v-slot:operation_btn="{row}">
                                <a-form layout="inline" class="search-form" >
                                    <a-form-item >
                                            <a-icon style="font-size:20px;color:#5ca3e5;" type="arrow-up" @click="upAndDownClick(row,true)"/>
                                        </a-form-item>
                                        <a-form-item >
                                            <a-icon style="font-size:20px;color:#5ca3e5;" type="arrow-down" @click="upAndDownClick(row,false)"/>
                                        </a-form-item>
                                    <a-form-item >
                                        <a-button class="blue-btn" type="primary" @click="handleClick(row)" icon="edit">编辑</a-button>
                                    </a-form-item>
                                    <a-form-item >
                                        <a-button class="red-btn" type="primary" @click="deletionClick(row)" icon="delete">删除</a-button>
                                    </a-form-item>
                                </a-form>
                            </template>
                        </commpVxeTable>
                    </div>
                </div>
            <!-- </div> -->
            
            <a-modal
                :title="chapterTitle"
                :visible="chaptervisible"
                @ok="chapterOk"
                @cancel="chaptervisible = false"
                :forceRender="true"
                width="70%"
                class="planProduction-inspectionItems-modal"
                
            >
                <a-form-model
                    ref="ruleForm1"
                    :model="chapterModel"
                    :rules="rules1"
                    :key="chapterKey"
                    layout="horizontal"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 18 }"
                    class="fileTemplate-chapter-box"
                >
                    <!-- <a-form-model-item ref="forder" label="序号" prop="forder" >
                        <a-input
                        placeholder="请输入序号"
                        v-model:value="chapterModel.forder"/>
                    </a-form-model-item> -->
                    <a-form-model-item ref="fzjmc" label="审评项目名称" prop="fzjmc" >
                        <a-input
                        placeholder="请输入审评项目名称"
                        v-model:value="chapterModel.fzjmc"/>
                    </a-form-model-item>
                    <a-form-model-item ref="fmsmbnr" label="模板描述" prop="fmsmbnr" >
                        <commpKindeditor
                            :id="fchapterKindeditorId" 
                            :key="chapterKindeditorKey"
                            :height="windowInnerHeight - 375+'px'" 
                            width="100%" 
                            :content.sync="chapterModel.fmsmbnr"
                            :afterChange="()=>{}"
                            :loadStyleMode="false"
                        ></commpKindeditor>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </a-modal>
    </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import commpKindeditor from '@/components/commp-kindeditor/commpKindeditor.vue'
import {
    mbzjadd,
    mbzjedit,
    mbzjdelete,
    mbzjmbZjUpOrder,
    mbzjmbZjDownOrder,
    mbzjupdateJcmb,
} from './service/index'
export default {
    components:{
        commpVxeTable,
        commpKindeditor,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            tableKey:null,
            fileTemplateIncreaseKindeditorId:'fileTemplateIncreaseKindeditorId'+Date.now(),
            windowInnerHeight:window.innerHeight,
            fchapterKindeditorId:'fchapterKindeditorId'+Date.now(),
            fileTemplateIncreaseKindeditorKey:null,
            chapterKindeditorKey:null,
            dataTableConfig:{
                api: assessCheckApi.mbzjqueryMbZjList,
                rowId: 'id',
                pageSize:50,
                height:window.innerHeight - 340,
                paramet:{
                }
            },
            formItem:[{
                label: '审评项目名称',
                model: 'fzjmc',
            }],
            columnsVxe:[{
                title: '序号',
                field: 'forder',
                width:100,
            },{
                title: '审评项目名称',
                field: 'fzjmc',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                fixed: 'right',
                width:255
            }],
            rules1:{
                fzjmc: [
                    { required: true, message: '请输入审评项目名称', trigger: 'blur' },
                ],
                fmsmbnr: [
                    { required: true, message: '请输入模板描述', trigger: 'blur' },
                ],
            },
            chapterTitle:'',
            chapterModel:{},
            chaptervisible:false,
            formState:{},
            chapterKey:null,
            activeKey:'审评情况描述'
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log(row)
            this.formState = row
            this.dataTableConfig.paramet={fwjmbid:row.id}
            this.tableKey = Date.now()
            this.fileTemplateIncreaseKindeditorKey = Date.now()
            this.activeKey = '审评情况描述'
        },
        tabPaneChange(){

        },
        upAndDownClick(row,val){
            if(val){
                mbzjmbZjUpOrder({id:row.id}).then(res=>{
                    if(res.code == 200){
                        this.$refs.acceptanceRegistrationRef.searchEvent()
                    }else{
                        this.$message.message(res.message)
                    }
                })
            }else{
                mbzjmbZjDownOrder({id:row.id}).then(res=>{
                    if(res.code == 200){
                        this.$refs.acceptanceRegistrationRef.searchEvent()
                    }else{
                        this.$message.message(res.message)
                    }
                })
            }
        },
        addition(){//添加审评项目
            this.chapterTitle = '添加审评项目'
            this.chapterModel = {
                fwjmbid:this.formState.id
            }
            this.chaptervisible = true
            this.chapterKey = Date.now()
        },
        handleClick(row){
            this.chapterTitle = '编辑审评项目'
            this.chapterModel = {...row,fwjmbid:this.formState.id}
            this.chaptervisible = true
            this.chapterKey = Date.now()
        },
        deletionClick(row){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    mbzjdelete({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                        }else{
                            that.$message.warning(res.message)
                        }              
                        that.tableKey = Date.now()
                    })
                },
                
            });
        },
        zjqkmsBlur(name,val){
            let data = {
                id:this.formState.id,
            }
            data[name] = val
            mbzjupdateJcmb(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        chapterOk(){
            this.$refs.ruleForm1.validate(valid => {
                if (valid) {
                    if(this.chapterModel.id){
                        mbzjedit(this.chapterModel).then(res=>{
                            if(res.code == 200){
                                this.chaptervisible = false
                                this.tableKey = Date.now()
                                this.$message.success(res.message)
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        mbzjadd(this.chapterModel).then(res=>{
                            if(res.code == 200){
                                this.chaptervisible = false
                                this.tableKey = Date.now()
                                this.$message.success(res.message)
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less">
.inspectionItems-db-modal{
    .ant-modal-body{
        padding: 8px;
    }
    .inspectionItems-situation-tips{
        width:100%;
        text-align:right;
        display:inline-block;
        color: #ed5565;
        font-weight: 600;
        background:#fff;
        padding: 0 0 5px 0;
    }
}
.inspectionItems-content-tabs{
    border: 1px solid #38f;
    border-top: none;
    padding: 3px;
    .item-box-v{
        display: flex;
        align-items: center;
        margin: 10px 0;
        .text-v{
            font-size: 16px;
            font-weight: 600;
            color: #242424;
        }
    }
}
.planProduction-inspectionItems-modal{
    .fileTemplate-chapter-box{
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 107px;
        }
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
    .ant-modal-body{
        padding: 8px;
    }
}
</style>